<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>徐理念Blog - 文章管理</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
    <link rel="stylesheet" th:href="@{/css/home.css}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <script src="/script/jquery-3.6.0.min.js"></script>
</head>
<body>
<!-- 头部区域 -->
<header class="blog-header">
    <div class="container">
        <div class="d-flex justify-content-between align-items-center">
            <!-- 左侧标题 -->
            <div class="blog-title">
                <h3 class="mb-0">徐理念Blog</h3>
            </div>

            <!-- 中间导航链接 -->
            <nav class="d-none d-md-block">
                <ul class="nav nav-pills">
                    <li class="nav-item">
                        <a class="nav-link" href="/blogHome"><i class="bi bi-house-door"></i> 首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/articleList"><i class="bi bi-card-text"></i> 全部动态</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/categories"><i class="bi bi-folder"></i> 分类</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/tagList"><i class="bi bi-tags"></i> 标签</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="/articleManage"><i class="bi bi-pencil-square"></i> 文章管理</a>
                    </li>
                </ul>
            </nav>

            <!-- 右侧用户信息 -->
            <div class="user-info">
                <div class="dropdown">
                    <a class="d-flex align-items-center text-decoration-none dropdown-toggle"
                       href="#" role="button" data-bs-toggle="dropdown">
                        <div class="user-avatar" th:text="用户">U</div>
                        <span class="d-none d-md-inline" th:text="徐理念">用户名</span>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="/profile"><i class="bi bi-person"></i> 个人资料</a></li>
                        <li><a class="dropdown-item" href="/settings"><i class="bi bi-gear"></i> 设置</a></li>
                        <li><hr class="dropdown-divider"></li>
                        <li><a class="dropdown-item" href="/logout"><i class="bi bi-box-arrow-right"></i> 退出登录</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</header>

<!-- 主要内容区域 -->
<main class="main-content">
    <div class="container">
        <!-- 移动端导航菜单 -->
        <div class="d-md-none mb-4">
            <div class="card">
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <a href="/" class="btn btn-outline-primary"><i class="bi bi-house-door"></i> 首页</a>
                        <a href="/articleList" class="btn btn-outline-primary"><i class="bi bi-card-text"></i> 全部动态</a>
                        <a href="/categories" class="btn btn-outline-primary"><i class="bi bi-folder"></i> 分类</a>
                        <a href="/tagList" class="btn btn-outline-primary"><i class="bi bi-tags"></i> 标签</a>
                        <a href="/articleManage" class="btn btn-outline-primary active"><i class="bi bi-pencil-square"></i> 文章管理</a>
                    </div>
                </div>
            </div>
        </div>

        <!-- 内容区域 -->
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h4 class="mb-0">文章管理</h4>
                        <a href="/articleCreate" class="btn btn-primary">
                            <i class="bi bi-plus-circle"></i> 新建文章
                        </a>
                    </div>

                    <div class="card-body">
                        <!-- 文章管理操作栏 -->
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <div class="input-group">
                                    <input id="articleTitle" type="text" class="form-control" placeholder="搜索文章标题...">
                                    <button class="btn btn-outline-secondary" type="button" onclick="articleSeachByTitle()">
                                        <i class="bi bi-search" ></i> 搜索
                                    </button>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="d-flex justify-content-end">
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown">
                                            <i class="bi bi-funnel"></i> 状态筛选
                                        </button>
                                        <ul class="dropdown-menu">
                                            <li><a class="dropdown-item" href="/articleManage">全部</a></li>
                                            <li><a class="dropdown-item" href="/articleSeachByStatus/1">已发布</a></li>
                                            <li><a class="dropdown-item" href="/articleSeachByStatus/0">草稿</a></li>
                                            <li><a class="dropdown-item" href="/articleSeachByStatus/2">审核中</a></li>
                                        </ul>
                                    </div>
                                    <button class="btn btn-outline-primary ms-2">
                                        <i class="bi bi-arrow-repeat"></i> 刷新
                                    </button>
                                </div>
                            </div>
                        </div>

                        <!-- 文章列表 -->
                        <div class="articles-list">
                            <div th:if="${articlePage != null and not #lists.isEmpty(articlePage.records)}">
                                <div class="table-responsive">
                                    <table class="table table-hover">
                                        <thead>
                                            <tr>
                                                <th>标题</th>
                                                <th>状态</th>
                                                <th>分类</th>
                                                <th>标签</th>
                                                <th>浏览量</th>
                                                <th>点赞数</th>
                                                <th>创建时间</th>
                                                <th>操作</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr th:each="article : ${articlePage.records}">
                                                <td>
                                                    <div>
                                                        <strong th:text="${article.title}">文章标题</strong>
                                                    </div>
                                                    <div class="small text-muted" th:text="${#strings.abbreviate(article.summary, 50)}">
                                                        文章摘要
                                                    </div>
                                                </td>
                                                <td>
                                                    <span class="badge bg-success" th:if="${article.status == 1}">已发布</span>
                                                    <span class="badge bg-secondary" th:if="${article.status == 0}">草稿</span>
                                                    <span class="badge bg-warning" th:if="${article.status == 2}">审核中</span>
                                                    <span class="badge bg-danger" th:if="${article.status == 3}">已下线</span>
                                                </td>
                                                <td>
<!--                                                    <input id="articleCategoryId" type="hidden" th:value="${article.categoryId}">-->
                                                    <span id="articleCategoryName" class="badge bg-info" th:text="${article.categoryName}">默认分类</span>
                                                </td>
                                                <td>
                                                    <span class="badge bg-primary me-1" th:if="${article.tags}" th:text="${article.tags}">标签</span>
                                                    <span class="badge bg-secondary" th:unless="${article.tags}">无标签</span>
                                                </td>
                                                <td th:text="${article.viewCount ?: 0}">0</td>
                                                <td th:text="${article.likeCount ?: 0}">0</td>
                                                <td th:text="${#temporals.format(article.createTime, 'yyyy-MM-dd')}">2023-01-01</td>
                                                <td>
                                                    <div class="btn-group btn-group-sm">
                                                        <a th:href="@{/articleEdit(id=${article.id})}" class="btn btn-outline-primary">
                                                            <i class="bi bi-pencil"></i> 编辑
                                                        </a>
                                                        <a th:href="@{/articleDetail(id=${article.id})}" class="btn btn-outline-info">
                                                            <i class="bi bi-eye"></i> 查看
                                                        </a>
                                                        <button type="button" class="btn btn-outline-danger"
                                                                th:onclick="'confirmDelete(' + ${article.id} + ')'">
                                                            <i class="bi bi-trash"></i> 删除
                                                        </button>
                                                    </div>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>

                                <!-- 分页组件 -->
                                <div class="pagination-container">
                                    <nav aria-label="文章分页" th:if="${articlePage.pages > 1}">
                                        <ul class="pagination">
                                            <!-- 上一页 -->
                                            <li class="page-item" th:classappend="${articlePage.current == 1} ? 'disabled'">
                                                <a class="page-link"
                                                   th:href="@{/articleManage(pageNum=${articlePage.current - 1})}"
                                                   aria-label="Previous">
                                                    <span aria-hidden="true">&laquo;</span>
                                                </a>
                                            </li>

                                            <!-- 页码 -->
                                            <li class="page-item"
                                                th:each="i : ${#numbers.sequence(1, articlePage.pages)}"
                                                th:classappend="${i == articlePage.current} ? 'active'">
                                                <a class="page-link" th:href="@{/articleManage(pageNum=${i})}" th:text="${i}">1</a>
                                            </li>

                                            <!-- 下一页 -->
                                            <li class="page-item" th:classappend="${articlePage.current == articlePage.pages} ? 'disabled'">
                                                <a class="page-link"
                                                   th:href="@{/articleManage(pageNum=${articlePage.current + 1})}"
                                                   aria-label="Next">
                                                    <span aria-hidden="true">&raquo;</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </nav>
                                </div>
                            </div>

                            <!-- 无文章时显示 -->
                            <div th:if="${articlePage == null or #lists.isEmpty(articlePage.records)}" class="text-center py-5">
                                <i class="bi bi-file-earmark-text" style="font-size: 3rem; color: #ccc;"></i>
                                <h5 class="mt-3">暂无文章</h5>
                                <p class="text-muted">还没有创建任何文章</p>
                                <a href="/articleCreate" class="btn btn-primary">
                                    <i class="bi bi-plus-circle"></i> 创建第一篇文章
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

<!-- 底部区域 -->
<footer class="blog-footer">
    <div class="container">
        <div class="row">
            <div class="col-md-4 mb-4 mb-md-0">
                <h5>联系我</h5>
                <ul class="list-unstyled">
                    <li class="mb-2">
                        <i class="fab fa-qq me-2"></i>
                        <strong>QQ:</strong> <span>123456789</span>
                    </li>
                    <li class="mb-2">
                        <i class="bi bi-envelope me-2"></i>
                        <strong>Email:</strong> <span>example@example.com</span>
                    </li>
                    <li>
                        <i class="bi bi-chat-dots me-2"></i>
                        <strong>微信:</strong> <span>xuln_blog</span>
                    </li>
                </ul>
            </div>
            <div class="col-md-4 mb-4 mb-md-0">
                <h5>关于博客</h5>
                <p>这是一个个人技术博客，分享编程经验、技术心得和生活感悟。</p>
            </div>
            <div class="col-md-4">
                <h5>友情链接</h5>
                <ul class="list-unstyled">
                    <li><a href="#" class="text-decoration-none">GitHub</a></li>
                    <li><a href="#" class="text-decoration-none">SegmentFault</a></li>
                    <li><a href="#" class="text-decoration-none">掘金</a></li>
                </ul>
            </div>
        </div>
        <hr>
        <div class="text-center">
            <p class="mb-0">&copy; 2022 徐理念Blog. All rights reserved.</p>
        </div>
    </div>
</footer>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
    // $(function (){
    //     var articleCategoryId = $('#articleCategoryId').val();
    //     $.ajax({
    //         url: '/getArticleCategoryName/'+articleCategoryId,
    //         type: 'GET',
    //         success: function (data) {
    //             // console.log('data: ',data)
    //             // console.log('data.data: ',data.data)
    //             if (data.code === 200){
    //
    //                 $('#articleCategoryName').text(data.data);
    //
    //             }else {
    //                 console.log('错误: ',data)
    //             }
    //
    //         }
    //     })
    // })

    function confirmDelete(articleId) {
        if (confirm('确定要删除这篇文章吗？')) {
            // window.location.href = '/articleDelete?articleId=' + articleId;

            // 这里可以添加删除逻辑
            $.ajax({
                url: '/articleDelete',
                type: 'POST',
                data: {articleId: articleId},
                success: function (data) {
                    console.log('data对象:',data)
                    console.log('data的类型:', typeof data);
                    if (data.code === 200) {
                        console.log('data: ',data)
                        console.log('data.data: ',data.data)
                        alert('文章ID: ' + articleId + ' 删除成功')
                        window.location.reload();
                    }else {
                        console.log('data: ',data)
                    }
                },
                error: function (xhr, status, error) {
                    alert('文章ID: ' + articleId + ' 删除失败')
                    window.location.reload();
                }
            })
        }else {
            // alert('文章ID: ' + articleId + ' 未删除')
            return false;
        }
    }

    function articleSeachByTitle(){

        var articleTitle = $('#articleTitle').val();
        if (articleTitle === ''){
            window.location.href = '/articleManage';
            return false;
        }

        if (articleTitle.length > 20){
            alert('文章标题长度不能超过20个字符')
            return false;
        }

        window.location.href = '/articleSeachByTitle?articleTitle=' + articleTitle;

        // $.ajax({
        //     url: '/articleSeachByTitle',
        //     type: 'POST',
        //     data: {articleTitle: articleTitle},
        //     success: function (data) {
        //         console.log('data对象:',data)
        //         console.log('data的类型:', typeof data);
        //         if (data.code === 200) {
        //             console.log('data: ',data)
        //             console.log('data.data: ',data.data)
        //             alert('文章ID: ' + articleTitle + ' 删除成功')
        //         }
        //     }
        // })
    }
</script>
</body>
</html>
